<!DOCTYPE html>

<html>
    <head>
		<meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <link href="./css/modal.css" rel="stylesheet" type="text/css" />
        <title>Index</title>
    </head>
    <body>
        <div>
            <input type="button" onclick="fadeIn();"  value="模态对话框"/>
        </div>
        <div id="formTable" class="modal hide">
            <form id="form0" method="Post" action="~/Home/Index">
                <div class="modal-header" style=" height:40px;">
                    <div style=" float:left;">This is a Modal Heading</div>
                    <div style=" float:right;"><a class="close" id="close" onclick="fadeOut();" style="cursor:pointer;">×</a></div>
                </div>
                <div class="modal-body">
                    <h4>Text in a modal</h4>
                    <p>You can add some text here.</p>		        
                </div>
                <div class="modal-footer">
                    <a href="javascript:void(0);" onclick="fadeOut();" class="btn btn-success">提交</a>
                    <a  onclick="fadeOut();" class="btn" data-dismiss="modal">关闭</a>
                    <a  href="javascript:void(0);" onclick="fadeOut();" class="btn" data-dismiss="modal">关闭</a>
                </div>
            </form>
        </div>

        <div id="shade" class="modal-backdrop hide"></div>
        <script >
            function fadeIn() {
                document.getElementById('formTable').className = 'modal';
                document.getElementById('shade').className = 'modal-backdrop';
            }

            function fadeOut() {
                document.getElementById('formTable').className = 'modal hide';
                document.getElementById('shade').className = 'modal-backdrop hide';
            }
        </script>
    </body>
</html>
